<div class="am-pull-to-refresh-content-wrapper">
  <div class="am-pull-to-refresh-content" [ngClass]="transtionCls" [ngStyle]="style">
    <div *ngIf="refreshDown" class="am-pull-to-refresh-indicator am-pull-to-refresh-header-indicator">
      <ng-template
        *ngIf="isTemplateRef(headerIndicator[state.currentState])"
        [ngTemplateOutlet]="headerIndicator[state.currentState]"
      ></ng-template>
      <ng-container *ngIf="!isTemplateRef(headerIndicator[state.currentState])">{{
        headerIndicator[state.currentState]
      }}</ng-container>
    </div>
    <div #pullToRefresh>
      <ng-content></ng-content>
      <div
        *ngIf="direction === 'down' && endReachedRefresh"
        class="am-pull-to-refresh-indicator am-pull-to-refresh-footer-indicator"
      >
        <ng-template
          *ngIf="isTemplateRef(footerIndicator[state.currentState])"
          [ngTemplateOutlet]="footerIndicator[state.currentState]"
        ></ng-template>
        <ng-container *ngIf="!isTemplateRef(footerIndicator[state.currentState])">{{
          footerIndicator[state.currentState]
        }}</ng-container>
      </div>
    </div>
    <div *ngIf="refreshUp" class="am-pull-to-refresh-indicator am-pull-to-refresh-footer-indicator">
      <ng-template
        *ngIf="isTemplateRef(footerIndicator[state.currentState])"
        [ngTemplateOutlet]="footerIndicator[state.currentState]"
      ></ng-template>
      <ng-container *ngIf="!isTemplateRef(footerIndicator[state.currentState])">{{
        footerIndicator[state.currentState]
      }}</ng-container>
    </div>
  </div>
</div>
